<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/detail.css">
    <script src="/lib/requirejs/require.min.js" data-main="/js/detail"></script>
</head>

<body>
    <header></header>
    <div class="detail_nav">
        <a href="#"><img src="/images/logo.png"></a>
        <div class="bottom">
            <ul>
                <li><a href="/html/list.html">首页</a></li>
                <li><a href="/html/list.html">女鞋</a>
                    <div class="xiala1">

                    </div>
                </li>
                <li><a href="/html/list.html">男鞋</a>
                    <div class="xiala1">

                    </div>
                </li>
                <li><a href="/html/list.html">运动</a>
                    <div class="xiala1">

                    </div>
                </li>
                <li><a href="/html/list.html">户外</a>
                    <div class="xiala1">

                    </div>
                </li>
                <li class="ertong"><a href="/html/list.html">儿童</a>
                    <div class="xiala1">

                    </div>
                </li>
                <li><a href="/html/deatil.html">箱包</a>
                    <div class="xiala1">

                    </div>
                </li>
            </ul>
            <form>
                <input type="text" class="input1">
                <input type="button" class="input2">
            </form>
        </div>
    </div>
    <div class="detail_head">
        您当前位置：
        <a href="#">首页</a>>
        <a href="#">男鞋</a>>
        <a href="#">男士单鞋</a>>
        <a href="#">满帮鞋</a>>
    </div>
    <div class="detail_wrap">

    </div>




    <div class="detail_center_wart">
        <div class="top">
            商品信息
        </div>
        <div class="bottom">
            <table class="spec_table">
                <tbody>
                    <tr>
                        <td width="20%" title="40码鞋长参考(男)：28CM">40码鞋长参考(男)：28CM</td>
                        <td width="20%" title="鞋底材质：橡胶底">鞋底材质：橡胶底</td>
                        <td width="20%" title="面料图案：纯色">面料图案：纯色</td>
                        <td width="20%" title="内增高：无">内增高：无</td>
                        <td width="20%" title="鞋跟形状：方跟">鞋跟形状：方跟</td>
                    </tr>
                    <tr>
                        <td width="20%" title="鞋面材质：牛皮革">鞋面材质：牛皮革</td>
                        <td width="20%" title="流行元素：素面">流行元素：素面</td>
                        <td width="20%" title="闭合方式：系带">闭合方式：系带</td>
                        <td width="20%" title="风格：商务">风格：商务</td>
                        <td width="20%" title="色系：黑色">色系：黑色</td>
                    </tr>
                    <tr>
                        <td width="20%" title="鞋跟：3CM">鞋跟：3CM</td>
                        <td width="20%" title="鞋头：圆头">鞋头：圆头</td>
                        <td width="20%" title="40码鞋宽参考(男)：9.5CM">40码鞋宽参考(男)：9.5CM</td>
                        <td width="20%" title="性别：男子">性别：男子</td>
                        <td width="20%" title="里料材质：猪皮革">里料材质：猪皮革</td>
                    </tr>
                    <tr>
                        <td width="20%" title="制作工艺：胶贴皮鞋">制作工艺：胶贴皮鞋</td>
                        <td width="20%" title="鞋垫材质：头层猪皮革">鞋垫材质：头层猪皮革</td>
                        <td width="20%" title="皮质特征：软面皮">皮质特征：软面皮</td>
                        <td width="20%" title="款式：商务正装鞋">款式：商务正装鞋</td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="detail_size_warp">
        <div class="top">
            尺寸信息
        </div>
        <div class="conter">
            <table class="spec_table">
                <tbody>
                    <tr>
                        <td>法国码</td>
                        <td>38</td>
                        <td>39</td>
                        <td>40</td>
                        <td>41</td>
                        <td>42</td>
                        <td>43</td>
                        <td>44</td>
                    </tr>
                    <tr class="odd">
                        <td>国际码</td>
                        <td>240</td>
                        <td>245</td>
                        <td>250</td>
                        <td>255</td>
                        <td>260</td>
                        <td>265</td>
                        <td>270</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <footer></footer>
    <style>

        #gal1 {
         width: 60px;
         height: 500px;
         float: left;
         display: block;
    }
    #gal1 a {
        display: block;
        width: 50px;
        height: 50px;
        border: 2px solid #999;
        margin-bottom: 10px;
    }
    #gal1 a img {
        width: 50px;
        height: 50px;
    }
    .imgright{
        width: 480px;
        height: 480px;
        display: block;
        float: right;
    }
    .active {
        border: 2px solid red !important;
    }
    </style>

    <script type="text/html" id="prod-temp-detail">

        <div class="box_box">
            <div class="left">
                
			<div id="gal1">
			  {{each zoomImgs img}}
			  <a href="#" data-image="{{img.middle}}" data-zoom-image="{{img.big}}">
                <img src="{{img.small}}" />
			  </a>
              {{/each}}
            </div>
            <img class="zoom-img" src="{{zoomImgs[0].middle}}" data-zoom-image="{{zoomImgs[0].big}}"/>
            </div>
            <div class="detail_right">
                <div class="logo">
                    <a href="#"><img class="img" src="{{img}}"></a>
                </div>
                <div style="display:none" class="id">{{id}}</div>
                <p><span class="title">{{title}}</span></p>
                <h1><b>¥</b><span class="price">{{price}}</span><span class="price2">¥ {{price2}}</span></h1>
                <div class="color">
                    <span>颜色：</span>
                    <span class="span1"><img src="{{img}}"></span>
                </div>
                <div class="size">
                    <span>尺寸：</span>
                    <span class="span1">
                        <a href="#">38</a>
                        <a href="#">39</a>
                        <a href="#">40</a>
                        <a href="#">41</a>
                        <a href="#">42</a>
                        <a href="#">43</a>
                        <a href="#">44</a>
                    </span>
                </div>
                <div class="number">
                    <span>数量：</span>
                    <input type="text" value="1">
                    <a href="#" class="a1"></a>
                    <a href="#" class="a2"></a>
                </div>
                <ul class="ul_cart">
                    <li><a href="#" id="btn_cart">加入购物袋</a></li>
                    <li><a href="/html/cart.html" id="btn_cart2">立即购买</a></li>
                </ul>
            </div>
        </div>
    
    </script>
</body>

</html>